<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import './Widgets/widgets.css';

import planeData from './assets/json/plane.json';
console.log(planeData);

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';

// 天地图 官网申请的key https://console.tianditu.gov.cn/api/key
const webKey = '01fc395160d8eb3b82aefe65b2280e58';

Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

// https://cesium.com/learn/cesiumjs/ref-doc/SampledPositionProperty.html?classFilter=sam
// new Cesium.SampledPositionProperty(referenceFrame, numberOfDerivatives)

onMounted(async () => {
  // 地球视图，底图加载
  const viewer = new Cesium.Viewer('container', {
    //信息窗口
    infoBox: false,
    shouldAnimate: true, // 运动状态
    //设置地形
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true, // 水纹效果  海里面有波浪的效果
      requestVertextNormal: true, // 光照效果
    }),
  });

  //隐藏cesium Icon-logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  // 添加3D建筑
  const building = viewer.scene.primitives.add(new Cesium.createOsmBuildings());

  // 创建一个新的SampledPositionProperty
  var position = new Cesium.SampledPositionProperty();

  /**
儒略日（Julian Day，JD）是天文学中使用的一种时间系统，其起点为公元前4713年1月1日格林尼治中午12时。这个时间系统是连续的，没有分割成年、月、日等单位，因此可以精确表示任意两个时刻之间的时间差，避免了在计算日期时由于历法变更带来的麻烦。

在Cesium中，儒略日被表示为JulianDate对象。每个JulianDate对象包含两部分信息：天数（dayNumber）和天内的秒数（secondsOfDay）。天数是一个整数，表示从儒略日起点开始经过的天数；天内的秒数是一个小数，表示天数中未计入的部分天的秒数。这种表示方式可以提高时间的精度，因为JavaScript中的浮点数只能精确到约16位数字。

JulianDate对象还提供了一些方法和属性，例如：

JulianDate.now()：返回表示当前时间的JulianDate对象。
JulianDate.addDays(julianDate, days, result)：返回一个新的JulianDate对象，它表示在指定的儒略日基础上增加指定天数后的时间。
JulianDate.toDate(julianDate)：将儒略日转换为JavaScript的Date对象。
你还可以通过JulianDate对象的dayNumber和secondsOfDay属性来获取或设置儒略日的天数和天内的秒数。

在Cesium中，儒略日主要用于表示时间动态数据，例如卫星的轨道数据、飞机的飞行路径等
   */
  // 添加位置样本 cesium 中，默认使用儒略日
  var start = Cesium.JulianDate.fromDate(new Date());
  var stop = Cesium.JulianDate.addSeconds(start, 30, new Cesium.JulianDate()); // 假设飞行时间为30分钟

  // 将查看器的时间设置成响应的起点和终点时间
  viewer.clock.startTime = start.clone();
  viewer.clock.stopTime = stop.clone();
  viewer.clock.currentTime = start.clone(); // 更新当前时间

  viewer.timeline.zoomTo(start, stop); // 视角位置随着时间变化

  planeData.forEach((dataPoint, i) => {
    // 当前点时间
    const time = Cesium.JulianDate.addSeconds(
      start,
      i * dataPoint.time,
      new Cesium.JulianDate()
    );
    // 设置当前点位置
    const posi = new Cesium.Cartesian3.fromDegrees(
      dataPoint.longitude,
      dataPoint.latitude,
      dataPoint.altitude
    );
    // 添加轨迹 采样点
    position.addSample(time, posi);

    // 添加点 【看飞机轨道】
    viewer.entities.add({
      position: position,
      point: {
        pixelSize: 10,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2,
      },
    });
  });

  console.log('position--轨迹采样点', position);

  // 创建一个实体来表示飞机
  var airEntity = viewer.entities.add({
    // 设置其可见时间
    availability: new Cesium.TimeIntervalCollection([
      new Cesium.TimeInterval({
        start: start,
        stop: stop,
        isStartIncluded: true,
        isStopIncluded: false,
      }),
    ]),
    name: '飞机实体',
    position: position, // 设置飞机的可以用
    orientation: new Cesium.VelocityOrientationProperty(position), // 会自动根据采样点，计算出飞机的速度和方向
    model: {
      uri: './model/bird.glb',
      // uri: 'https://cesium.com/downloads/CesiumAir/Cesium_Air.glb',
      minimumPixelSize: 128,
      maximumScale: 20000,
    },
    // 绘制轨迹线
    path: new Cesium.PathGraphics({
      width: 5, // 线宽
    }),
  });

  // 设置相机追踪该实体
  viewer.trackedEntity = airEntity;

  // 设置时间速率为1000倍
  viewer.clock.multiplier = 1000; // 每过一秒钟，模拟的时间就会过去1000秒。
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#container {
  height: 94vh;
  width: 94vw;
}
</style>
